<template>
  <section class="main">
    <a-card :bordered="false" title="腰围曲线">
      <template slot="extra">
        <a-button
          v-for="item in duringTime"
          :key="item.value"
          :type="queryParam.period == item.value ? 'danger' : ''"
          :style="{ marginLeft: '7px' }"
          @click="loadData(item.value)"
          >{{ item.text }}</a-button
        >
      </template>
      <template v-if="charts.axisData.length > 0">
        <line-charts
          :key="initCharts"
          :x-axis-data="charts.axisData"
          :y-axis-unit="charts.axisUnit"
          :visual-map="charts.visualMap"
          :legend="charts.legend"
          :show-legend-arr="charts.showLegend"
          :series-data="charts.seriesData"
        />
      </template>
      <template v-else>
        <div class="no-data"><a-icon type="frown-o" />暂无数据</div>
      </template>
    </a-card>

    <a-card style="margin-top: 24px" :bordered="false" title="腰围列表">
      <template slot="extra">
        <a-button
          v-for="item in duringTime"
          :key="item.value"
          :type="queryParam.period == item.value ? 'danger' : ''"
          :style="{ marginLeft: '7px' }"
          @click="loadData(item.value)"
          >{{ item.text }}</a-button
        >
      </template>

      <div style="display: flex; justify-content: flex-end; margin-bottom: 20px">
        <a-button type="primary" @click="handleAdd">添加</a-button>
      </div>

      <template v-if="listDataSource.length > 0">
        <a-table
          ref="table"
          bordered
          size="middle"
          rowKey="date"
          :columns="listColumns"
          :dataSource="listDataSource"
          :pagination="ipagination"
          :loading="listDataLoading"
          @change="
            (pagination, filters, sorter, currentDataSource) =>
              handleTableChange(pagination, filters, sorter, currentDataSource, 'getList')
          "
        >
          <template slot="waistLineValue" slot-scope="text, record">
            <a-tooltip :title="record.waistLineRecordBean.waistLineRemark || ''">
              <template v-if="record.waistLineValue">
                <span>{{ record.waistLineValue }}</span>
              </template>
              <template>
                <div
                  style="width:104px;height:104px;margin-right: 10px;margin: 0 8px 8px 0;"
                  v-if="record.waistLineRecordBean && record.waistLineRecordBean.recordPhoto"
                >
                  <div
                    v-for="(photo, index) in record.waistLineRecordBean.recordPhoto.split(',')"
                    :key="index"
                    style="float:left; width: 100%;height: 100%;position: relative;padding: 8px;border: 1px solid #d9d9d9;border-radius: 4px;"
                  >
                    <img
                      style="width: 80px; height: 80px;"
                      :src="photo"
                      :preview="record.waistLineRecordBean.recordPhoto.split(',')"
                    />
                  </div>
                </div>
                <div v-else></div>
              </template>
            </a-tooltip>
          </template>
        </a-table>
      </template>
      <template v-else>
        <div class="no-data"><a-icon type="frown-o" />暂无数据</div>
      </template>

      <waistline-modal ref="modalForm" @ok="modalFormOk"></waistline-modal>
    </a-card>
  </section>
</template>

<script>
import { BloodProfileMixin } from '@/mixins/BloodProfileMixin'
import LineCharts from '@/views/bloodProfile/components/LineChart'
import { PAGE_MENU_TYPE } from '@/store/mutation-types'
import WaistlineModal from './modules/WaistlineModal'

const listColumns = [
  {
    title: '日期/检测项',
    align: 'center',
    dataIndex: 'recordDate',
    width: 300
  },
  {
    title: '腰围',
    align: 'center',
    dataIndex: 'waistLineValue',
    width: 300,
    scopedSlots: { customRender: 'waistLineValue' }
  }
]
export default {
  name: 'BloodSugar',
  mixins: [BloodProfileMixin],
  components: { VeLine, LineCharts, WaistlineModal },
  data() {
    return {
      initCharts: 'init',
      queryParam: { patientId: this.$route.query[PAGE_MENU_TYPE.PatientId], type: 3, period: 0 },
      listColumns,
      charts: {
        visualMap: {
          top: 0,
          right: 30,
          align: 'left',
          orient: 'horizontal',
          precision: 1,
          pieces: [
            {
              gt: 50,
              lte: 70,
              color: '#e88327'
            },
            {
              gt: 70,
              lte: 120,
              color: '#00d570'
            },
            {
              gt: 120,
              lte: 160,
              color: '#fb0b0a'
            }
          ],
          outOfRange: {
            color: '#999'
          }
        },
        axisData: [],
        axisUnit: '',
        legend: ['腰围'],
        showLegend: [],
        seriesData: []
      },
      url: {
        // 根据时段与时间周期查询腰围记录
        getCharts: '/101/09/1010901',
        // 按日期分组获取患者腰围记录
        getList: '/101/09/1010902'
      }
    }
  }
}
</script>

<style lang="less" scoped>
.no-data {
  color: rgba(0, 0, 0, 0.25);
  text-align: center;
  line-height: 64px;
  font-size: 16px;

  i {
    font-size: 24px;
    margin-right: 16px;
    position: relative;
    top: 3px;
  }
}
</style>

